<template>
    <view class="container">
        <view class="h-90"></view>
        <view class="p-30">
            <u-text
                text="输入充值金额"
                size="26rpx"
                color="#888888"
                margin="0 0 22rpx 14rpx"
            ></u-text>
            <u-input
                :placeholder="'最低充值'+minTopUpMoney+'元'"
                border="none"
                v-model="money"
                type="number"
                fontSize="38rpx"
                color="#000000"
                :customStyle="{
                    padding: '37rpx 32rpx',
                    background: '#F8F8F8',
                    borderRadius: '4rpx',
                    fontWeight: 400
                }"
            ></u-input>
        </view>
        <view class="h-80"></view>
        <u-cell
            :border="false"
            rightIcon="arrow-right"
            :rightIconStyle="{
                fontSize: '28rpx'
            }"
            :isLink="true"
            @click="paySheetShow = true"
        >
            <u-text
                text="选择支付方式"
                size="26rpx"
                color="#888888"
                slot="title"
            ></u-text>
            <view class="pay-info" slot="value">
                <u-icon
                    :name="actionPay.logo"
                    width="50rpx"
                    height="50rpx"
                ></u-icon>
                <u-text
                    :text="actionPay.title"
                    size="28rpx"
                    color="#000000"
                    margin="0 0 0 10rpx"
                ></u-text>
            </view>
        </u-cell>
        <view class="bottom">
            <u-button
                text="确认充值"
                :customStyle="{
                    height: '90rpx',
                    background: '#000000',
                    fontSize: '30rpx',
                    color: '#FFFFFF'
                }"
                @click="onsubmit"
            ></u-button>
        </view>
        <u-action-sheet
            :show="paySheetShow"
            round="36rpx"
            safeAreaInsetBottom
        >
            <view class="sheet-pay-body">
                <view class="sheet-pay-title">选择支付方式</view>
                <view class="sheet-close-icon" @click="paySheetShow = false"></view>
                <view class="sheet-pay-ul">
                    <block v-for="item in payChannelList" :key="item.id">
                        <view class="sheet-pay-li" @click="selectPay(item)">
                            <view class="sheet-pay-info">
                                <u-icon
                                    :name="item.logo"
                                    width="54rpx"
                                    height="54rpx"
                                ></u-icon>
                                <u-text
                                    :text="item.title"
                                    size="32rpx"
                                    color="#000000"
                                    margin="0 0 0 25rpx"
                                    :lines="1"
                                ></u-text>
                            </view>
                            <view class="icon-action-action" v-if="item.id === actionPay.id"></view>
                        </view>
                    </block>
                </view>
            </view>
        </u-action-sheet>
        <u-popup
            :show="popupShow"
            mode="center"
            :customStyle="{
                width: '660rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                :extData="{}"
                p_type="safePass"
            ></popup-context>
        </u-popup>
    </view>
</template>

<script>
    import { getPayChannel } from "@/config/api"
    import { userTopUp, unionTopUp, plutusPayTopUp } from "@/config/api-java"
    import { javaBaseUrl } from "@/config/config"
    import PopupContext from "@/components/PopupContext"
    // #ifdef H5
    import { isWeChat } from "@/untils"
    // #endif
    export default {
        name: "recharge",
        components: {
            PopupContext
        },
        data() {
            return {
                money: null,
                paySheetShow: false,
                payChannelList: [],
                actionPay: {},
                topUpId: null,
                popupShow: false
            }
        },
        computed: {
            minTopUpMoney() {
                return this.$store.getters.minTopUpMoney
            }
        },
        async onLoad() {
            this.payChannelList = await getPayChannel()
            this.actionPay = this.payChannelList[0]
        },
        onShow() {
            this.popupShow = false
        },
        methods: {
            selectPay(item) {
                this.actionPay = item
                this.paySheetShow = false
            },
            async onsubmit() {
                if (!this.$store.getters.safePass) {
                    this.popupShow = true
                    return
                }
                if (this.money < this.$store.getters.minTopUpMoney) {
                    uni.$u.toast('最低充值'+this.$store.getters.minTopUpMoney+'元')
                    return
                }
                if (!this.topUpId) {
                    const res = await userTopUp({money: this.money})
                    this.topUpId = res
                }
                if (this.actionPay.openMode === 'link') {
                    this.linkPay()
                } else if(this.actionPay.openMode === 'qrcode') {
                    this.qrcodeUrl()
                } else if(this.actionPay.openMode === 'jLink') {
                    this.jLinkPay()
                }
            },
            async qrcodeUrl() {
                // #ifdef H5
                if(isWeChat()) {
                    uni.showLoading({
                        title: '正在发起支付'
                    })
                    const res = await unionTopUp(this.topUpId)
                    window.location.href = res.codeUrl
                    return
                }
                // #endif
                uni.$u.route("pages/unionQrcode/index", {id: this.topUpId, payPrice:  this.money, type: 'topUp'})
            },
            linkPay() {
                var src = javaBaseUrl + this.actionPay.payUrl +'/'+ this.topUpId
                // #ifdef H5
                window.location.href = src
                // #endif
                // #ifdef APP-PLUS
                uni.$u.route({
                    url: "pages/webView/index",
                    params: {url: src}
                })
                // #endif
            },
            async jLinkPay() {
                const res = await plutusPayTopUp(this.topUpId)
                // #ifdef H5
                window.location.href = res
                // #endif
                // #ifdef APP-PLUS
                plus.runtime.openURL(res)
                /*uni.$u.route({
                    url: "pages/webView/index",
                    params: {url: res}
                })*/
                // #endif
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .h-90 {
            height: 90rpx;
        }
        .h-80 {
            height: 80rpx;
        }
        .p-30 {
            padding: 0 30rpx;
        }
        .pay-info {
            display: flex;
            align-items: center;
        }
        .bottom {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20rpx 20rpx calc(var(--window-bottom) + 33rpx) 20rpx;
        }
        .sheet-pay-body {
            padding: 54rpx 26rpx 33rpx 26rpx;
            position: relative;
            .sheet-pay-title {
                font-size: 36rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-bottom: 49rpx;
            }
            .sheet-pay-ul {
                padding-top: 49rpx;
                .sheet-pay-li {
                    margin-bottom: 70rpx;
                    padding-left: 21rpx;
                    padding-right: 16rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .sheet-pay-info {
                        display: flex;
                        align-items: center;
                    }

                    .icon-action-action {
                        background: url("../../static/icon_pay_action.png") no-repeat;
                        background-size: 100% 100%;
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
            }
            .h-30 {
                height: 30rpx;
                background: #ffffff;
            }
            .sheet-close-icon {
                background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
                position: absolute;
                top: 30rpx;
                right: 38rpx;
            }
        }
    }
</style>
